﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/public.css">
    <title>新任务</title>
    <style>
        .container{
            width:90%;
            margin: 0 auto;
            padding-bottom:70px;
        }
        .select{
            border: none;
            outline: none;
            background: rgb(230,230,230);
            border-radius:4px;
            padding:2% 0;
            height:20px;
            width:100%;
            position: relative;
        }
        .select option{
            width:200px;
        }
        input,textarea{
            border: none;
            outline: none;
            background: rgb(230,230,230);
            border-radius:4px;
            padding:2%;
            width:96%;
        }
        select{
            border: none;
            outline: none;
            background: rgb(230,230,230);
            border-radius:4px;
            padding:2%;
            width:100%;
        }
        textarea{
            resize:none;
        }
        option{
            padding:2% 0;
        }
        .fl,.fr{
            width: 50%;
        }
        .box{
            padding:8px 0;
            position: relative;
        }
        .bb{
            border-bottom: 1px solid rgb(230,230,230);
        }
        h1{
            color:#fff;
        }
        .tleheader{
            background: rgb(46,182,185);
            border:none;
        }

        /*123*/
        .selecticon{
            position: absolute;
            width:30px;
            right:5px;
            bottom:7px;
            background: rgb(230,230,230);
        }
        .ls{
            height:0px;
            width: 100%;
            background: rgb(244,244,244);
            overflow-y:scroll;
        }
        .item img{
            width:40px;
            padding:0 10px;
            margin-bottom: -14px;
        }
        .item1 img{
            width:40px;
            padding:0 10px;
            margin-bottom: -14px;
        }
        .select{
            border: none;
            outline: none;
            background: rgb(230,230,230);
            border-radius:4px;
            /*padding:2% 0;*/
            height:24px;
            width:100%;
            position: relative;
        }


        .fb{
            padding: 0;
            background: rgb(46,182,185);
            color:#fff;
        }
        .w50{
            width:50%;
            padding:14px 0;
        }
        .ml1{
            margin-left: -1px
        }
    </style>
</head>
<body>
<header class="tleheader">
    <p class="backbtn"><a style="margin:0;">
        <img src="../icon/arrow/zjt.png" class="backpic" alt="">
        <span>返回</span></a>
    </p>
    <h1 class="tc" style="border: none;padding:0;">新任务</h1>
    <p class="somebtn">
        <span><a href="rwcf.html">拆分</a></span>
    </p>
</header>
<form action="">
    <div class="container">
        <div class="box bb">
            <p class="cb">任务标题</p>
            <input type="text"/>
        </div>
        <div class="box">
            <p class="cb">任务描述</p>
            <textarea name="" id="" cols="30" rows="4"></textarea>
        </div>
        <div class="box bb">
            <p class="cb">任务数量</p>
            <select name="" id="">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
            </select>
            <img src="../icon/arrow/xjt.png" class="selecticon" alt="">
        </div>
        <div class="box">
            <div class="fl">
                <p class="cb">任务等级</p>
                <select name="" id="" style="width:96%;padding:4%;">
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                </select>
                <img src="../icon/arrow/xjt.png" class="selecticon" alt="">
            </div>
            <div class="fr" style="text-align: right;">
                <p class="cb" style="text-align: left;padding-left:4%;">截至日期</p>
                <select name="" id="" style="width:96%;padding:4%;">
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                </select>
                <img src="../icon/arrow/xjt.png" class="selecticon" alt="">
            </div>
            <div class="clear"></div>
        </div>
        <div class="box bb">
            <p class="cb">关联任务</p>
            <select name="" id="">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
            </select>
            <img src="../icon/arrow/xjt.png" class="selecticon" alt="">
        </div>
        <div class="box bb">
            <p class="cb">任务负责人</p>
            <!--<select name="" id="" style="display: none;">-->
            <!--<option value=""><img src="../icon/head.png" alt=""/>狄丹阳</option>-->
            <!--<option value="">2</option>-->
            <!--<option value="">3</option>-->
            <!--<option value="">4</option>-->
            <!--</select>-->
            <div class="select" id="selectimg"><img src="../icon/arrow/xjt.png" class="selecticon" style="bottom:2px;" alt="">
                <p class="item1" id="seletedmsg" style="line-height: 50px;margin-top:-12px;">
                    <img src="../icon/head.png" alt="">
                    <span>狄丹阳</span>
                </p>
            </div>
            <div class="ls" id="ls">
                <div style="width: 100%;">
                    <p class="item" style="line-height: 50px;">
                        <img src="../icon/head.png" alt="">
                        <span>狄丹阳1</span>
                    </p>
                    <p class="item" style="line-height: 50px;">
                        <img src="../icon/head.png" alt="">
                        <span>狄丹阳2</span>
                    </p>
                    <p class="item" style="line-height: 50px;">
                        <img src="../icon/head.png" alt="">
                        <span>狄丹阳3</span>
                    </p>
                    <p class="item" style="line-height: 50px;">
                        <img src="../icon/head.png" alt="">
                        <span>狄丹阳4</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="box">
            <p class="cb">任务状态：<span class="fr tr">进行中</span></p>
        </div>
    </div>
    <div class="fb">
        <div class="w50 fl ml1">任务提醒</div>
        <div class="w50 fl bl">任务完成</div>
    </div>
</form>
<script type="text/javascript" src="../js/back.js"></script>
<script>
    var h = document.body.offsetHeight;
    var ls = document.getElementById("ls");
    var selectimg = document.getElementById("selectimg");
    var seletedmsg = document.getElementById("seletedmsg");
    var items = document.getElementsByClassName("item");
    var j = 0;
    selectimg.onclick = function(){
        j++;
        if(j%2 !== 0){
            ls.style.height = "150px";
        }else{
            ls.style.height = "0px";
        }
    };

    var it = new Array();
    for(var i = 0; i < items.length; i++){
        it[i] = function(x){
            items[x].onclick = function(){
                seletedmsg.getElementsByTagName("img")[0].src = items[x].getElementsByTagName("img")[0].src;
                seletedmsg.getElementsByTagName("span")[0].innerHTML = items[x].getElementsByTagName("span")[0].innerHTML;
                ls.style.height = "0px";
                j++;
            }
        }
        it[i](i)
    };

    var select = document.getElementsByTagName("select");
    var s = new Array();
    for(var k = 0; k < items.length; k++){
        s[k] = function(x){
            select[x].onclick = function(){
                ls.style.height = "0px";
                if(ls.offsetHeight > 0){
                    j++;
                }
            }
        };
        s[k](k)
    }

</script>
</body>
</html>

